<template>
  <el-row>
    <el-col :lg="20">
      <el-card style="margin-top: 10px">
        <el-form :inline="true" class="form">
          <el-form-item label=""
            ><el-input placeholder="请输入菜品名称..." v-model="searchName">
              <template #prepend>菜品名称</template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-select v-model="type" @change="handlerType">
              <template #prefix
                ><p style="color: #666666">用餐时间</p></template
              >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="type" @change="handlerType">
              <template #prefix><p style="color: #666666">口味</p></template>
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handlerGetMeanList"
              >搜索</el-button
            >
            <el-button type="good" @click="handlerReset">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-select v-model="sort" @change="handlerSort">
              <template #prefix
                ><p style="color: #666666">排序方式</p></template
              >
              <el-option
                v-for="item in sortList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card
        :body-style="{ padding: '10px' }"
        style="height: 650px; width: 100%; margin-top: 5px; overflow-y: auto"
      >
        <el-row :gutter="20">
          <el-col
            v-for="(item, index) in searchList"
            :key="item.id"
            :xs="8"
            :sm="6"
            :md="6"
            :lg="4"
            style="padding: 5px"
          >
            <el-card
              :body-style="{ padding: '10px' }"
              style="height: 300px; width: 200px"
            >
              <img
                :src="item.image"
                class="image"
                style="width: 180px; height: 200px"
              />
              <div style="padding: 14px">
                <span>{{ item.Dish_name }}</span>
                <div class="bottom">
                  <el-text truncated
                    >功效：{{ item.category.slice(1, -1) }}</el-text
                  >
                  <el-button
                    text
                    class="button"
                    type="primary"
                    @click="toDetail(item.ID)"
                    >详情</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <el-pagination
        style="margin-top: 15px"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 7, 10, 12, 20]"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
    <!-- 右侧热门标签 -->
    <el-col :lg="4">
      <el-card
        shadow="never"
        style="height: 100%"
        body-style="padding: 0px 20px"
        title-style="font-size: 24px;"
      >
        <template #header>
          <span style="font-weight: 700; font-size: 18px">热门标签</span>
        </template>
        <div
          class="hot_tag"
          v-for="(item, index) in hotTagList"
          :key="index"
          @click="handlerClickSearch(item.keyword)"
        >
          {{ item.keyword }}
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { reqSearch, reqAllMeals, reqHotList } from "@/api/menu";
import { ElMessage } from "element-plus";
import treeSearch from "@/views/search/treeSearch.vue";
import contentCard from "@/views/search/contentCard.vue";
import { useRouter } from "vue-router";
let router = useRouter();
const hotTagList = ref([]);
const sort_field = ref("add_time");
const sort_direction = ref("desc");
const activeName = ref("first");
const searchList = ref([]);
const sort = ref("time1");
const cooktime = ref();
const type = ref("all");
const searchName = ref("");
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(12);
const typeList = [
  { value: "all", label: "全部" },
  { value: "breakfast", label: "早餐" },
  { value: "lunch", label: "午餐" },
  { value: "dinner", label: "晚餐" },
];
const sortList = [
  { value: "time1", label: "默认时间" },
  { value: "time2", label: "时间递减" },
  { value: "fav_num", label: "收藏量" },
  { value: "view_num", label: "浏览量" },
];
const handlerMountSearch = async () => {
  try {
    const res = await reqAllMeals({
      page: currentPage.value,
      limit: pageSize.value,
      sort_field: sort_field.value,
      sort_direction: sort_direction.value,
      type: type.value,
      name: searchName.value,
    });
    searchList.value = res.data;
    total.value = res.total;
    console.log("searchList", searchList.value);
  } catch (e) {}
};
const filterMeals = (data) => {
  const list = [];
  data.forEach((item) => {
    if (item.type == type.value) {
      list.push(item);
    }
  });
  searchList.value = list;
  total.value = list.length;
};
const handlerGetMeanList = async () => {
  if (searchName.value === "") return ElMessage.error("菜名不能为空");
  try {
    let res = await reqSearch({
      name: searchName.value,
      page: currentPage.value,
      limit: pageSize.value,
      sort_field: sort_field.value,
      sort_direction: sort_direction.value,
      type: type.value,
    });
    console.log("res", res);
    console.log(type.value);
    total.value = res.total;
    searchList.value = res.data;
  } catch (e) {
    ElMessage({
      showClose: true,
      message: "暂时更多相关食谱~",
      type: "error",
    });
  }
};
const handleSizeChange = async () => {
  if (searchName.value === "") await handlerMountSearch();
  else await handlerGetMeanList();
};
const handleCurrentChange = async () => {
  if (searchName.value === "") await handlerMountSearch();
  else await handlerGetMeanList();
};
const handleClick = (tab, event) => {
  console.log(activeName.value);
};
const getTopSearchList = async () => {
  let res = await reqHotList();
  hotTagList.value = res.data;
};
/* 标签搜索 */
const handlerClickSearch = (val) => {
  searchName.value = val;
  handlerGetMeanList();
};

/* 重置 */
const handlerReset = () => {
  searchName.value = "";
  type.value = "all";
  sort.value = "time1";
  handlerMountSearch();
  ElMessage({
    showClose: true,
    message: "重置成功",
    type: "success",
  });
};

onMounted(() => {
  handlerMountSearch();
  getTopSearchList();
});
//详情跳转
const toDetail = (id) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
  console.log(id);
};
const changeGetMeals = async () => {
  switch (sort.value) {
    case "time1":
      sort_field.value = "add_time";
      sort_direction.value = "desc";
      break;
    case "time2":
      sort_field.value = "add_time";
      sort_direction.value = "asc";
      break;
    case "fav_num":
      sort_field.value = "fav_num";
      sort_direction.value = "desc";
      break;
    case "view_num":
      sort_field.value = "view_num";
      sort_direction.value = "desc";
      break;
  }
  if (searchName.value === "") {
    await handlerMountSearch();
  } else await handlerGetMeanList();
};
const handlerSort = (val) => {
  changeGetMeals();
};
const handlerType = async (val) => {
  changeGetMeals();
};
</script>

<style lang="scss" scoped>
.slider {
  width: 10%;
  padding: 20px 40px;
  box-shadow: 1px 1px 5px gray;
  border-radius: 10px;
  .el-menu {
    border: 0 !important;
  }
}
.el-checkbox-group {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  align-items: left;
  width: 60%;
  margin-left: 20%;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
.el-sub-menu__title:hover {
  color: #409eff;
  background-color: white;
}

.content_div {
  margin-top: 20px;
  display: flex !important;
  flex-wrap: wrap;
  gap: 30px;
}

.hot_tag {
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  &:hover {
    color: #409eff;
  }
}
</style>
